<template>
  <a-card title="分类管理">
    <div>
      <a-input
        v-model:value="keyword"
        enter-button
        placeholder="添加类别。注意，首位字符不能为空格"
        style="width: 25%"
        @pressEnter="createData"
      />
      &nbsp;&nbsp;
      <a-tooltip placement="top">
        <template #title>
          <span>添加书籍的类别</span>
        </template>
        <a-button shape="circle" @click="createData">
          <template #icon>
            <PlusOutlined/>
          </template>
        </a-button>
      </a-tooltip>
    </div>
    <a-divider type="horizontal"/>
    <a-table :columns="columns"
             :dataSource="list"
             :pagination="pagination"
             :row-key="record=>record._id"
             @change="handleTableChange">
      <template #action="{ record }">
        <a-button size="small" type="primary" @click="handleUpdate(record)">修改</a-button>
        &nbsp;
        <a-button size="small" type="danger" @click="handleDelete(record._id)">删除</a-button>
      </template>
    </a-table>
  </a-card>
  <a-modal
    v-model:visible="categoryFormVisible"
    title="修改分类"
    @ok="updateData"
  >
    <a-form :label-col="{span: 6}" :model="formState" :wrapper-col="{span: 12}">
      <a-form-item label="类型">
        <a-input v-model:value="formState.title"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { Button, Card, Divider, Form, Input, message, Modal, Table, Tooltip } from 'ant-design-vue'
import { computed, onMounted, reactive, ref } from 'vue'
import { createCategory, fetchCategoryList, removeCategory, updateCategory } from '@/api/classification'
import { PlusOutlined } from '@ant-design/icons-vue'

const columns = [
  {
    title: '类型',
    dataIndex: 'title',
  },
  {
    title: '操作',
    slots: {
      customRender: 'action',
    },
  },
]
export default {
  name: 'index',
  components: {
    ACard: Card,
    ATable: Table,
    AButton: Button,
    AInput: Input,
    PlusOutlined,
    ADivider: Divider,
    AModal: Modal,
    AForm: Form,
    AFormItem: Form.Item,
    ATooltip: Tooltip,
  },
  setup () {
    const formState = reactive({
      title: '',
    })
    const categoryFormVisible = ref(false)
    const list = ref([])
    const currentPage = ref(1)
    const size = ref(5)
    const total = ref(0)
    const keyword = ref('')
    const getList = async () => {
      await fetchCategoryList(currentPage.value, size.value).then(res => {
          list.value = res.data.list
          total.value = res.data.total
        },
      )
    }
    const pagination = computed(() => ({ // 此处意为：直接返回一个对象，小括号是优先级的意思，先执行小括号内部的
        total: total.value,
        current: currentPage.value,
        pageSize: size.value,
      }),
    )
    const handleTableChange = async ({ current, pageSize }) => {
      currentPage.value = current
      size.value = pageSize
      await getList()
    }
    onMounted(() => {getList()})
    const handleUpdate = record => {
      formState.title = record.title
      formState.id = record._id
      categoryFormVisible.value = true
    }
    const handleDelete = id => {
      const index = list.value.findIndex(element => element._id === id)
      removeCategory(id).then(res => {
        message.success(res.msg)
        list.value.splice(index, 1)
      })
    }
    const updateData = async () => {
      const temp = {}
      Object.assign(temp, formState)
      await updateCategory(temp).then(res => {
        message.success(res.msg)
        categoryFormVisible.value = false
      })
      await getList()
    }
    const createData = async () => {
      let reg = /^\S/
      if (!reg.test(keyword.value)) { //todo 判断字符串不能为空的方法
        message.warning('请输入内容')
        return
      }
      await createCategory(keyword.value).then(res => {
        message.success(res.msg)
      })
      await getList()
      keyword.value = ''
    }

    return {
      columns,
      list,
      pagination,
      formState,
      categoryFormVisible,
      handleTableChange,
      updateData,
      createData,
      handleUpdate,
      handleDelete,
      keyword,
    }
  },

}
</script>

<style scoped>

</style>
